<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-17 10:13:29
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-11-14 13:49:34
 * @FilePath: \hy-ui\src\views\app\appInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="AppInfo" v-loading="loading">
      <el-card class="box-card" shadow="false" v-if="!isDetail">
        <div class="header">
          <div class="headerLeft">
            <el-dropdown
              trigger="click"
              placement="bottom"
              @command="handleBigCommand"
            >
              <el-button>
                分类管理<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu
                slot="dropdown"
                style="min-width: 115px; text-align: center"
              >
                <el-dropdown-item icon="el-icon-plus" command="1"
                  >新增</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <el-button
              type="primary"
              icon="el-icon-plus"
              class="createAppBtn"
              style="background: #2f54eb"
              @click="handleSmallCommand('4')"
              >创建应用</el-button
            >
          </div>
          <el-input
            placeholder="请输入关键字"
            v-model="name"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              type="primary"
              style="background: #2f54eb"
              @click="getListSmall"
            ></el-button>
          </el-input>
        </div>
        <div class="tab">
          <el-tabs
            v-model="activeName"
            @tab-click="getListSmall"
            editable
            @edit="handleTabsEdit"
          >
            <el-tab-pane
              :label="`${item.name}(${item.count})`"
              :name="String(item.id)"
              v-for="item in bigList"
              :key="item.id"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="applist">
          <div class="item" v-for="item in smallList" :key="item.id">
            <div
              class="itemCnt"
              :style="{ background: item.backcolor || 'rgb(245, 34, 45)' }"
              @click="handleDetail(item)"
            >
              <svg-icon
                :icon-class="item.icon || 'system'"
                className="itemSvgClass"
              />
            </div>
            <p class="itemTxt">{{ item.name }}</p>
            <el-dropdown
              trigger="click"
              class="toolIcon"
              placement="bottom-start"
              @command="(type) => handleSmallCommand(type, item)"
            >
              <i class="el-icon-s-tools"></i>
              <el-dropdown-menu
                slot="dropdown"
                style="min-width: 100px; text-align: center"
              >
                <el-dropdown-item command="1">设置应用</el-dropdown-item>
                <el-dropdown-item command="2">删除应用</el-dropdown-item>
                <el-dropdown-item command="3">权限设置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-card>
    </div>
    <bigClassAdd
      :open="bigOpen"
      :close="() => (bigOpen = false)"
      v-if="bigOpen"
      :getList="getList"
    />
    <smallClass
      :open="smallOpen"
      :close="() => (smallOpen = false)"
      v-if="smallOpen"
      :getList="getList"
      :type="smallOpenType"
      :bigList="bigList"
      :id="smallDetailId"
    />
    <ItemDetail
      v-if="isDetail"
      :goBack="goBack"
      :appId="appId"
      :index="index"
      :tablePrefix="tablePrefix"
    />
  </div>
</template>

<script>
import {
  listAppInfo,
  getAppInfo,
  delAppInfo,
  addAppInfo,
  updateAppInfo,
} from "@/api/app/appInfo";
import { listAppCategory, delAppCategory } from "@/api/app/appCategory";
import bigClassAdd from "./components/bigClassAdd.vue";
import smallClass from "./components/smallClass.vue";
import ItemDetail from "./components/detail/index.vue";

export default {
  name: "AppInfo",
  components: {
    bigClassAdd,
    smallClass,
    ItemDetail,
  },
  data() {
    return {
      name: "",
      activeName: undefined,
      bigList: [],
      smallList: [],
      loading: false,
      bigOpen: false,
      smallOpen: false,
      smallOpenType: undefined,
      smallDetailId: undefined,
      isDetail: false,
      appId: undefined,
      index: undefined,
      tablePrefix: "oa",
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    if (!!sessionStorage.getItem("designParams")) {
      const params = JSON.parse(sessionStorage.getItem("designParams"));
      if (params?.isDetail && params?.appId && params?.index === "2") {
        this.appId = params?.appId;
        this.isDetail = true;
        this.index = params?.index;
        this.tablePrefix = params?.tablePrefix;
      }
    }
  },
  methods: {
    goBack() {
      this.index = "1";
      this.isDetail = false;
    },
    handleDetail(item) {
      this.isDetail = true;
      this.appId = item.id;
      this.tablePrefix = item.tablePrefix;
    },
    handleSmallCommand(type, item) {
      if (type === "3") {
        return this.$message.warning("敬请期待");
      } else if (type === "1" || type === "4") {
        this.smallOpenType = type;
        this.smallOpen = true;
        this.smallDetailId = item ? item.id : undefined;
      } else {
        this.$confirm("此操作将永久删除该应用, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await delAppInfo(item.id);
            if (res.code == 200) {
              this.$message.success("删除成功!");
              this.getList();
            }
          })
          .catch(() => {});
      }
    },
    handleTabsEdit(targetName, action) {
      if (!targetName) return this.$message.error("不能删除该分类");
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delAppCategory(targetName);
          if (res.code == 200) {
            this.$message.success("删除成功!");
            this.getList();
          }
        })
        .catch(() => {});
    },
    handleBigCommand(type) {
      if (type === "1") {
        this.bigOpen = true;
      }
    },
    async getList() {
      await this.getListBig();
      await this.getListSmall();
    },
    async getListBig() {
      const res = await listAppCategory();
      res.code == 200 ? (this.bigList = res.rows) : (this.bigList = []);
      this.activeName = String(res.rows?.[0]?.id);
      console.log(this.activeName);
    },
    async getListSmall() {
      this.loading = true;
      const res = await listAppInfo(
        this.activeName == 0
          ? { name: this.name }
          : { category: this.activeName, name: this.name }
      );
      res.code == 200 ? (this.smallList = res.rows) : (this.smallList = []);
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.AppInfo {
  padding: 10px;
  ::v-deep .el-card__body {
    min-height: 88vh;
  }

  ::v-deep .createAppBtn {
    margin-left: 10px;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .headerLeft {
      display: flex;
      align-items: center;
    }

    ::v-deep .input-with-select {
      width: 300px;
    }

    ::v-deep .el-icon-search {
      color: #fff;
    }
  }

  .tab {
    margin-top: 15px;

    ::v-deep .is-active {
      color: #2f54eb;
    }

    ::v-deep .el-tabs__active-bar {
      background: #2f54eb;
    }
  }

  .applist {
    display: flex;

    .item {
      padding: 15px 30px 0 30px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;

      .itemCnt {
        width: 80px;
        height: 80px;
        background: rgb(250, 84, 28);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;

        .itemSvgClass {
          color: #fff;
          font-size: 30px;
        }
      }

      .itemTxt {
        color: #333;
        font-size: 14px;
        margin: 10px;
      }

      .toolIcon {
        display: none;
        position: absolute;
        top: 10px;
        left: 10px;

        ::v-deep .el-icon-s-tools {
          color: rgb(47, 84, 235);
        }
      }
    }

    .item:hover {
      background: #f5f5f5;
      border-radius: 12px;
    }

    .item:hover .toolIcon {
      display: block;
    }
  }
}
</style>
